<template>
  <div class="subscribeServices">
    <x-header class="header" :left-options="{showBack: showHeaderBack,preventGoBack:true}" @on-click-back="goToPage" ref="header">我的预订</x-header>
    <div class="topHolder"></div>
    <box gap="1rem 0.8rem">
      <div class="topBtn" ref="topBtn">
        <x-button @click.native="gotoAddSub" :gradients="['#1D62F0', '#19D5FD']" class="inlineBtn">新建预订</x-button>
        <x-button link="/holidayPartyList" :gradients="['#FF5E3A', '#FF9500']" class="inlineBtn">节日/派对预订</x-button>
        <!--<x-button link="/"  :gradients="['#6F1BFE', '#9479DF']">代竞拍台位</x-button>-->
      </div>
    </box>
    <div class="subscribeList">
      <a v-for="(item,index) in subscribeList" :key="index" @click="toDetail(item.SUBSCRIBE_ID)">
        <form-preview class="formPreviewList label" :class="[getStateClass(item.STATE)]" :header-label="'房台类型：' + item.ROOM_PLATFORM_TYPE" :header-value="getState(item.STATE)" :body-items="getBody(item)"></form-preview>
      </a>
      <div class="listNoItem" v-if="subscribeList.length <= 0">暂无预订</div>
    </div>
  </div>
</template>

<script>
  import { XButton, Box, Group, GroupTitle, FormPreview, numberComma } from 'vux'
  import {getSubscribeList} from "../../api";
  import {message,toDecimal2} from "../../common/util";

  export default {
    name:'subscribeServices',
    data(){
      return{
        showHeaderBack:this.GLOBAL.showHeaderBack,
        loadingStatus:false,
        subscribeList:[]
      }
    },
    components: {
      XButton,
      Box,
      Group,
      GroupTitle,
      FormPreview
    },
    computed:{
    },
    methods:{
      goToPage(){
        this.$router.push({path:'/'})
      },
      formatCurrency(number){
        return numberComma(toDecimal2(number))
      },
      gotoAddSub(){
        this.$router.push({name:'增加预订',params:{subscribe:'normal'}})
      },
      getState(state){
        switch (state) {
          case 0:return '正在预约';break
          case 1:return '成功';break
          case 2:return '失败';break
          case 3:return '取消';break
          case 4:return '已到店';break
          case 5:return '超时';break
          case 6:return '已开单';break
          case 7:return '已消费';break
          case 8:return '未付押金';break
          default:return '无状态';break
        }
      },
      getStateClass(state){
        switch (state) {
          case 0:return 'orange';break
          case 1:return 'green';break
          case 2:return 'red';break
          case 3:return 'gray';break
          case 4:return 'blue';break
          case 5:return 'purple';break
          case 6:return 'lightBlue';break
          case 7:return 'lightGreen';break
          case 8:return 'brown';break
          default:return 'gray';break
        }
      },
      getBody(item){
        let list = []
        list.push({label:'预订时间',value:item.SUBSCRIBE_DATETIME})
        list.push({label:'预订类型',value:item.SUBSCRIBE_TYPE == 0?'普通预订':'节日派对预订'})
        list.push({label:'到店人',value:item.CUSTOMER_NAME + '(电话：' + item.PHONE + ')'})
        list.push({label:'点击查看详情>>',value:''})
        /*if(item.REMARK != '')
          list.push({label:'备注',value:item.REMARK})*/
        return list
      },
      toDetail(id){
        this.$router.push({name:'预订详情',params:{subscribeId:id}})
      }
    },
    mounted(){
      getSubscribeList().then((res)=>{
        if(res.status == 'success'){
          this.subscribeList = res.data
        }else if(res.status == 'error') {
          message({message:res.msg,type:'error'})
          console.log('getSubscribeList error info:', res.msg)
        }
        this.loadingStatus = false
        this.$store.commit('updateLoadingStatus',{isLoading:false})
      }).catch((err)=>{console.log('getSubscribeList catch info:',err)})
    }
  }
</script>

<style lang="scss" scoped>
  .subscribeServices{
    .topBtn{display: flex;justify-content: space-between;}
    .subscribeList{

    }
  }
</style>
